<template>
  <view class="container">
    <NavBar
      title="草稿箱"
      @rightTextClick="rightTextClick"
      :rightText="total ? rightText : ''"
    />
    <view class="content" v-if="total">
      <view
        class="content_item"
        v-for="(item, index) in playContainArr"
        :key="index"
        :style="isShowCheckBox ? 'left: 80rpx' : ''"
      >
        <radio-group
          v-if="isShowCheckBox"
          class="checkbox_group"
          :data-item="item"
          @change="checkboxChange"
        >
          <label>
            <radio :value="index" :checked="item.isChoose" color="#0b847b" />
          </label>
        </radio-group>
        <PlayContain
          :itemObj="item"
          @click="clickItemObj(item)"
          :isDrafts="true"
        />
      </view>
    </view>
    <NoData class="content" v-else />
    <view class="all-delall-btn" v-if="isShowCheckBox">
      <radio-group :data-item="item" @change="checkAll">
        <label>
          <radio value="allChoose" :checked="isAllChoose" color="#0b847b" />
          <text v-if="isAllChoose"> 全不选 </text>
          <text v-else> 全选 </text>
        </label>
      </radio-group>
      <button
        type="warn"
        style="background: #e86565"
        @click="delAllFn"
        class="del-btn"
        :disabled="!delArr.length"
      >
        删 除
      </button>
    </view>
  </view>
</template>

<script>
import {
  getDraftsList, // 获取草稿箱数据
  apiDeleteDrafts, // 删除
} from "../../net/dagnqunhuodong.js";
import NavBar from "@/components/NavBar.vue";
import NoData from "@/components/NoData";
import PlayContain from "../common/play-contain.vue";
export default {
  components: {
    NavBar,
    NoData,
    PlayContain,
  },
  data() {
    return {
      isAllChoose: false,
      delArr: [], //删除元素id
      rightText: "删除",
      rightTextColor: "red",

      isShowCheckBox: false,
      total: 0,
      playContainArr: [],
      params: {
        pageSize: 6,
        pageNum: 1,
      },
    };
  },
  onLoad() {
    this.GetDraftsList();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.params = {
      pageSize: 6,
      pageNum: 1,
    };
    this.playContainArr = [];
    this.GetDraftsList();
  },
  // 上拉加载
  onReachBottom() {
    if (this.params.pageNum * this.params.pageSize > this.total) {
      uni.showToast({
        title: "数据全部加载",
        duration: 2000,
      });
    } else {
      this.params.pageNum++;
      this.GetDraftsList();
    }
  },

  methods: {
    // 全选
    checkAll(e) {
      console.log(e);
      this.isAllChoose = !this.isAllChoose;
      this.delArr = [];
      if (this.isAllChoose) {
        for (let i = 0; i < this.playContainArr.length; i++) {
          this.playContainArr[i].isChoose = true;
          this.delArr.push(this.playContainArr[i].dqActivityId);
        }
      } else {
        for (let i = 0; i < this.playContainArr.length; i++) {
          this.playContainArr[i].isChoose = false;
        }
      }
    },
    // 删除
    delAllFn() {
      console.log(this.delArr);
      let data = this.delArr.join(",");
      apiDeleteDrafts(data)
        .then((res) => {
          this.params = {
            pageSize: 6,
            pageNum: 1,
          };
          this.playContainArr = [];
          this.GetDraftsList();
          this.isAllChoose = false;
          this.delArr = [];
          this.isShowCheckBox = false;
          this.rightText = "删除";
          this.rightTextColor = "red";
        })
        .catch((err) => {
          console.log(err);
          this.params = {
            pageSize: 6,
            pageNum: 1,
          };
          this.playContainArr = [];
          this.GetDraftsList();
          this.isAllChoose = false;
          this.delArr = [];
          this.isShowCheckBox = false;
          this.rightText = "删除";
          this.rightTextColor = "red";
        });
    },
    // 删除选中复选框
    checkboxChange(e) {
      let index = e.detail.value;
      this.playContainArr[index].isChoose =
        !this.playContainArr[index].isChoose;
      let id = e.currentTarget.dataset.item.dqActivityId;
      let isHas = this.delArr.indexOf(id) == -1 ? false : true;

      if (isHas) {
        for (let i = 0; i < this.delArr.length; i++) {
          if (id == this.delArr[i]) {
            this.delArr.splice(i, 1);
          }
        }
      } else {
        this.delArr.push(id);
      }
      this.isAllChoose =
        this.delArr.length == this.playContainArr.length ? true : false;
    },

    // 长按事件
    rightTextClick() {
      if (this.rightText == "删除") {
        this.rightText = "取消";
        this.isShowCheckBox = true;
      } else {
        this.rightText = "删除";
        this.isShowCheckBox = false;
        for (let i = 0; i < this.playContainArr.length; i++) {
          this.playContainArr[i].isChoose = false;
        }
        this.isAllChoose = false;
        this.delArr = [];
      }
      if (this.rightTextColor == "red") {
        this.rightTextColor = "#989898";
      } else {
        this.rightTextColor = "red";
      }
    },

    clickRightFn() {
      uni.navigateTo({
        url: "../../pages/DJinitiateActivitiesList/index",
      });
    },
    // 获取草稿箱数据
    GetDraftsList() {
      getDraftsList(this.params)
        .then((res) => {
          console.log(res);
          this.playContainArr = this.playContainArr.concat(res.data);
          for (let i = 0; i < this.playContainArr.length; i++) {
            this.playContainArr.isChoose = true;
          }
          this.total = res.total;
          uni.stopPullDownRefresh();
        })
        .catch((err) => {
          console.log(err);
          this.playContainArr = [];
          uni.stopPullDownRefresh();
        });
    },
    clickItemObj(item) {
      console.log(item);
      let params = {
        ...item,
        flag: false,
        formPage: "drafts",
      };
      uni.setStorage({
        key: "itemParams",
        data: JSON.stringify(params),
      });
      uni.navigateTo({
        url: `../DJinitiateActivitiesInfos/index`,
      });
    },
  },
};
</script>

<style>
page {
  background: #fff;
}

.container {
  width: 750rpx;
  padding-bottom: 20rpx;
  background: #fff;
  font-size: 30rpx;
}

.content {
  padding: 0 20rpx;
  position: relative;
}

.content_item {
  display: flex;
  align-items: center;
  position: relative;
  left: 0;
}

.checkbox_group {
  position: relative;
  left: -40rpx;
}

/* 删除全选 */
::v-deep .uni-checkbox-input {
  border-radius: 50%;
}

.all-delall-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  box-sizing: border-box;

  width: 750rpx;
  height: 120rpx;
  background: #ffffff;
  border-top: 1px solid #ebedf1;

  position: fixed;
  bottom: 0;
}

.del-btn {
  margin: 0;
  width: 340rpx;
  height: 88rpx;
  background: #e86565;
  border-radius: 8rpx;
}
</style>
